<% content_for :js do %>
  <script>
    var circleSummary = <%= @circles.to_json.html_safe %>;
  </script>
  <script id='circle-template' type='text/x-underscore-template'>
    <div class='circle-icon {{ icon }}'><i></i></div>

      {{#count}}
      <div class='circle-inner'>
        <div class='circle-counter'>{{ count }}</div>
        <div class='circle-title'>{{ title }}</div>
        <div class='circle-background'></div>
        <div class='circle-explore'>Explore the map</div>
      </div>
      {{/count}}

      {{^count}}
      <div class='circle-inner fake_title'>
        <a href="{{ link }}" class='circle-counter'>{{ title }}</div>
      </div>
      {{/count}}
    </div>
  </script>
<% end %>

<% content_for :header do %>
  <h1 class="header-title"><%= @title.html_safe %></h1>

  <div class="mod-checkouts">
    <%= link_to (
      "Check out " + content_tag(:span, "GFW Commodities")).html_safe,
      "http://commodities.globalforestwatch.org/", class: "gfw_sticker for_business", :target => "_blank" %>
    <%= link_to (
      "Check out "+content_tag(:span, "GFW Fires")).html_safe,
      "http://fires.globalforestwatch.org/", class: "gfw_sticker fires", :target => "_blank" %>
    <%= link_to (
      content_tag(:span, "HELP IMPROVE GFW!")).html_safe,
      "#{about_path}/testers", class: "gfw_testers", :target => "_blank" %>
  </div>
<% end %>

<%# content_for :filters do %>
  <!-- <div id="filters">
    <div class="inner">
      <div class="filters hide">
        <ul class="filters-list"></ul>
      </div>

      <div id="layer">
        <a href="#" class="filter-title"></a>

        <div class="filter-scroll">
          <ul class="filter-links"></ul>
        </div>

        <div class="filter-icon"></div>
        <div class="filter-line"></div>
      </div>
    </div>
  </div> -->
<%# end %>

<section class="layout-home-slider" id="homeSlider">
  <a href="/map" class="btn-mask"></a>
  <%= render "shared/feedback" %>
</section>

<section class="layout-home-actions section section_dark">
  <div class="inner">
    <ul class="columns">
      <li class="column three community">
        <i></i>
        <h3><%= t(".actions.community.title") %></h3>
        <p><%= t(".actions.community.text") %></p>
        <a href="https://groups.google.com/d/forum/globalforestwatch" class="btn darker_glow community" target="_blank"><%= t(".actions.community.link") %></a>
      </li>

      <li class="column three analysis_tool">
        <i></i>
        <h3><%= t(".actions.analysis.title") %></h3>
        <p><%= t(".actions.analysis.text") %></p>
        <%= link_to t(".actions.analysis.link"), '/map?analyze=1', :class => "btn darker_glow map ajax analyzing" %>
      </li>

      <li class="column three submit_story">
        <i></i>
        <h3><%= t(".actions.submit_story.title") %></h3>
        <p><%= t(".actions.submit_story.text") %></p>
        <%= link_to t(".actions.submit_story.link"), new_story_path, :class => "btn darker_glow" %>
      </li>
    </ul>
  </div>
</section>

<section class="section home_stories">
  <div class="inner">
    <h2 class="section-title">Stories about forest change</h2>
    <p class="section-desc">Browse <a href="/stories">featured user stories</a> or <a class="map ajax all" href="/map/3/15.00/27.00/ALL/580">explore all in the map</a>.</p>
    <ul class="columns">
      <li class="spinner"></li>
    </ul>
  </div>
</section>

<%# render "shared/stories" %>
<%# render "shared/sources" %>
<!-- <div id="sources" class="sources notranslate">

</div> -->

